<form name="form">
  <h3>{{ 'EXECUTION_METRICS' | translate }}</h3>

  <div uib-alert class="alert alert-info">
    <p>
      {{ 'EXECUTION_METRICS_INFO_1' | translate }}
          <strong>{{ 'EXECUTION_METRICS_FNI' | translate }}</strong>,
          <strong>{{ 'EXECUTION_METRICS_EDE' | translate }}</strong>,
          <strong>{{ 'EXECUTION_METRICS_RPI' | translate }}</strong>
          {{ 'EXECUTION_METRICS_AND' | translate }}
          <strong>{{ 'EXECUTION_METRICS_DI' | translate }}</strong>
          {{ 'EXECUTION_METRICS_INFO_2' | translate }}
          {{ 'EXECUTION_METRICS_AND' | translate }}
          <strong>{{ 'EXECUTION_METRICS_TW' | translate }}</strong>
          {{ 'EXECUTION_METRICS_INFO_3' | translate }}
    </p>
  </div>

  <div class="row">
    <div class="form-group col-xs-12 col-sm-6">
      <label for="startDate">
        {{ 'EXECUTION_METRICS_START_DATE' | translate }}
      </label>
      <div>
        <span cam-widget-inline-field
              id="startDate"
              class="form-control-static"
              type="datetime"
              value="startDate"
              flexible="true">
                <a class="form-control-static">{{startDate}}</a>
        </span>
      </div>
    </div>

    <div class="form-group col-xs-12 col-sm-6">
      <label for="endDate">
        {{ 'EXECUTION_METRICS_END_DATE' | translate }}
      </label>
      <div>
        <span cam-widget-inline-field
              id="endDate"
              class="form-control-static"
              type="datetime"
              value="endDate"
              flexible="true">
                <a class="form-control-static">{{endDate}}</a>
        </span>
      </div>
    </div>
  </div>

  <div ng-hide="alwaysShowUTWMetrics" class="task-worker-metrics">
    <input class="tw-checkbox-show" type="checkbox" ng-model="showTaskWorkerMetric" id="show-task-worker" />
    <label class="tw-checkbox-show-label" for="show-task-worker">
      {{ 'EXECUTION_METRICS_TASK_WORKERS_SHOW' | translate }}
    </label>
  </div>

  <div cam-widget-loader
       loading-state="{{ loadingState }}"
       text-error="{{ loadingError }}">
    <div class="panel panel-default">
      <div class="panel-heading">{{ 'EXECUTION_METRICS_RESULTS' | translate }}</div>
      <div class="panel-body">
        <ul>
          <li>
            <strong>{{ metrics.flowNodes.toLocaleString() }}</strong> {{ 'EXECUTION_METRICS_FNI' | translate }}
          </li>
          <li>
            <strong>{{ metrics.decisionElements.toLocaleString() }}</strong> {{ 'EXECUTION_METRICS_EDE' | translate }}
          </li>
          <li>
            <strong>{{ metrics.rootProcessInstances.toLocaleString() }}</strong> {{ 'EXECUTION_METRICS_RPI' | translate }}
          </li>
          <li>
            <strong>{{ metrics.decisionInstances.toLocaleString() }}</strong> {{ 'EXECUTION_METRICS_DI' | translate }}
          </li>
          <li ng-if="showTaskWorkerMetric">
            <strong>{{ metrics.taskWorkers.toLocaleString() }}</strong> {{ 'EXECUTION_METRICS_TW' | translate }}
          </li>
        </ul>
      </div>
    </div>
  </div>

  <div class="text-right"
       ng-show="loadingState !== 'INITIAL'">
    <button type="submit"
            ng-disabled="!form.$valid || loadingState === 'LOADING'"
            class="btn btn-default"
            ng-click="load()">
      {{ 'EXECUTION_METRICS_REFRESH' | translate }}
    </button>
  </div>

</form>
